<template>
  <div class="chart-map-container">
    <div id="cmapEchart" ref="map" class="chart-map"></div>
  </div>
</template>
<script>
/* eslint-disable */
import maps from './china.json'
import provinces from './province/350000.json'

// import axios from 'axios'
export default {
  props: {
    theme: String
  },
  data() {
    return {
      map: {},
      maps: maps,
      provinces: provinces,
      type: 0,
      data: [],
      legend: [],
      tooltip: ''
    }
  },
  watch: {
  },
  created() {
    // console.log(this.maps)
  },
  mounted() {
  },
  beforeDestory() {
    if (this.map) {
      this.map.clear()
    }
  },
  updated () {
  },
  methods: {
    init(nodeList, hotList, code) {
      if (code) {
        const self = this
        require([`./province/${code}.json`], function(provinces) {
          self.provinces = provinces
          self.initMap(nodeList, hotList, 'province')
          self.setPieChart()
        })
      } else {
        this.initMap(nodeList, hotList, 'china')
        this.setPieChart()
      }
    },
    initMap(nodeList, hotList, type) {
      const linesData = this.getLinesData(nodeList)
      const markerData = this.getMarkerData(nodeList)
      const regions = this.handleHotData(hotList, type)
      let useMap = 'china'
      if (type === 'china') {
        this.echarts.registerMap('china', this.maps)
        useMap = 'china'
      } else if (type === 'province') {
        this.echarts.registerMap('provinces', this.provinces)
        useMap = 'provinces'
      }
      // this.echarts.registerMap('provinces', this.provinces)
      this.option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: useMap,
          // left: 0,
          // top: 0,
          // right: 0,
          // bottom: 0,
          zoom: 1.2,
          label: {
            emphasis: {
              show: true
            }
          },
          silent: false,
          itemStyle: {
            opacity: 0.5,
            // color: '#FF4A4A',
            borderColor: '#FF4A4A',
            borderWidth: 2,
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0, color: 'rgba(238, 103, 35, 0.2)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(238, 103, 35, 0.5)' // 100% 处的颜色
              }]
            }
            // normal: {
            //   color: '#EE6723',
            //   borderColor: '#F68039'
            // }
          },
          label: {
            color: '#fff'
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              opacity: 0.5,
              // color: '#FF4A4A',
              borderColor: '#FF4A4A',
              borderWidth: 3
            }
          },
          regions: regions
        },
        series: [
          {
            name: '',
            type: 'lines',
            zlevel: 2,
            polyline: true,
            tooltip: {
              show: false
            },
            markPoint: {
              symbol: 'circle',
              symbolSize: 50
            },
            lineStyle: {
              color: '#8DFFE5',
              width: 1,
              opacity: 0.2
            },
            data: linesData,
            progressiveThreshold: 500,
            progressive: 200
          },
          {
            name: '',
            type: 'lines',
            zlevel: 2,
            polyline: true,
            effect: {
              show: true,
              symbol: 'circle',
              symbolSize: [3, 10],
              trailLength: 0.2,
              constantSpeed: 60,
              color: '#fff'
            },
            tooltip: {
              show: false
            },
            markPoint: {
              symbol: 'circle'
            },
            lineStyle: {
              width: 0
            },
            data: linesData
          },
          {
            // name: '节点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: markerData,
            symbolSize: 10,
            showEffectOn: 'render',
            rippleEffect: {
              color: '#BEFAFF',
              brushType: 'fill'
            },
            hoverAnimation: true,
            tooltip: {
              formatter: function(val) {
                console.log(val)
                return `${val.name}</br>ip:&nbsp&nbsp&nbsp&nbsp ${val.data.ip}</br>详情: ${val.data.des}`
              }
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: '#049DCE',
              shadowBlur: 10,
              shadowColor: '#009692'
            },
            emphasis: {
              color: '#FF5800',
              shadowBlur: 10,
              shadowColor: '#FF8238'
            },
            zlevel: 3
          }
        ]
      }
    },
    getLinesData(nodeList) {
      const res = []
      if (nodeList && nodeList.length) {
        let toCoord = []
        let fromCoord = []
        let fromName = ''
        let toName = ''
        const nodeMapping = {}
        nodeList.forEach((item, index) => {
          nodeMapping[item.id] = item
        })
        nodeList.forEach(item => {
          fromCoord = item.lnglat
          fromName = item.name
          if (item.to && item.to.length) {
            item.to.forEach(toItem => {
              toCoord = nodeMapping[toItem].lnglat
              toName = nodeMapping[toItem].name
              res.push({
                fromName: fromName,
                toName: toName,
                coords: [fromCoord, toCoord]
              })
            })
          }
        })
      }
      return res
    },
    getMarkerData(nodeList) {
      const res = []
      if (nodeList && nodeList.length) {
        nodeList.forEach((item, index) => {
          res.push({
            name: item.name,
            value: item.lnglat,
            des: item.des,
            ip: item.ip
          })
        })

      }
      return res
    },
    handleHotData(hotList, type) {
      const regions = []
      let colorInside = 'rgba(238, 103, 35, 0.2)'
      let colorOutside = 'rgba(238, 103, 35, 0.5)'
      if (type === 'china') {
        hotList.forEach(item => {
          if (item.value < 1000) {
            colorInside = 'rgba(147, 255, 195, 0.2)'
            colorOutside = 'rgba(147, 255, 195, 0.5)'
            // color = '#93FFC3'
          } else if (item.value < 2000) {
            colorInside = 'rgba(74, 234, 255, 0.2)'
            colorOutside = 'rgba(74, 234, 255, 0.5)'
            // color = '#4AEAFF'
          } else if (item.value < 3000) {
            colorInside = 'rgba(26, 159, 255, 0.2)'
            colorOutside = 'rgba(26, 159, 255, 0.5)'
            // color = '#1A9FFF'
          } else if (item.value < 5000) {
            colorInside = 'rgba(255, 134, 74, 0.2)'
            colorOutside = 'rgba(255, 134, 74, 0.5)'
            // color = '#FF864A'
          } else {
            colorInside = 'rgba(255, 74, 74, 0.2)'
            colorOutside = 'rgba(255, 74, 74, 0.5)'
            // color = '#FF4A4A'
          }
          regions.push({
            name: item.name,
            itemStyle: {
              opacity: 0.5,
              zlevel: 5,
              // color: '#FF4A4A',
              borderColor: '#FF4A4A',
              borderWidth: 1,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0, color: colorInside // 0% 处的颜色
                }, {
                  offset: 1, color: colorOutside // 100% 处的颜色
                }]
              }
            }
          })
        })
      } else {
        hotList.forEach(item => {
          if (item.value < 10) {
            colorInside = 'rgba(147,255,195, 0.2)'
            colorOutside = 'rgba(147,255,195, 0.5)'
            // color = '#93FFC3'
          } else if (item.value < 20) {
            colorInside = 'rgba(74,234,255, 0.2)'
            colorOutside = 'rgba(74,234,255, 0.5)'
            // color = '#4AEAFF'
          } else if (item.value < 30) {
            colorInside = 'rgba(26,159,255, 0.2)'
            colorOutside = 'rgba(26,159,255, 0.5)'
            // color = '#1A9FFF'
          } else if (item.value < 50) {
            colorInside = 'rgba(255,134,74, 0.2)'
            colorOutside = 'rgba(255,134,74, 0.5)'
            // color = '#FF864A'
          } else {
            colorInside = 'rgba(255,74,74, 0.2)'
            colorOutside = 'rgba(255,74,74, 0.5)'
            // color = '#FF4A4A'
          }
          regions.push({
            name: item.name,
            itemStyle: {
              opacity: 0.5,
              zlevel: 5,
              // color: '#FF4A4A',
              borderColor: '#FF4A4A',
              borderWidth: 1,
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0, color: colorInside // 0% 处的颜色
                }, {
                  offset: 1, color: colorOutside // 100% 处的颜色
                }]
              }
            }
          })
        })
      }
      return regions
    },
    setPieChart() {
      // const dom = this.$refs.map
      const mapChart = this.echarts.init(document.getElementById('cmapEchart'))
      // mapChart.clear()
      mapChart.setOption(this.option)
      window.addEventListener('resize', function () {
        mapChart.resize()
      })
    }
  }
}
</script>
<style scoped>
  body {
    min-width: 270px;
  }
  .chart-map-container {
    width: 100%;
    height: 100%;
    /* padding-bottom: 100%; */
    /* position: relative; */
  }
  .chart-map {
    width: 100%;
    height: 100%;
    /* position: absolute; */
  }
</style>
